<!--分享弹出框组件-->
<template>
  <yd-popup v-model="show" position="bottom" width="100%" height="auto">
    <div class="list">
      <div class="item" @click="shareWeChat">
        <div class="share-icon"><i class="xffont weixin xf-weixin11"></i></div>
        <div class="optionText">微信好友</div>
      </div>
      <div class="item" @click="shareFriend">
        <div class="share-icon"><i class="xffont weixin xf-friends"></i></div>
        <div class="optionText">朋友圈</div>
      </div>
      <div class="item" @click="shareQQ" v-if="env === 'app'">
        <div class="share-icon"><i class="xffont xf-qq2 qq"></i></div>
        <div class="optionText">QQ</div>
      </div>
      <div class="item" @click="shareQZone">
        <div class="share-icon"><i class="xffont xf-qzone kongjian"></i></div>
        <div class="optionText">QQ空间</div>
      </div>
      <div class="item" @click="shareSina">
        <div class="share-icon"><i class="xffont sina xf-xinlangweibo"></i></div>
        <div class="optionText">新浪微博</div>
      </div>
    </div>
    <mt-button size="large" @click="cancelOption">取消</mt-button>
    <button data-clipboard-target="#clip" class="clip-btn hidden" ref="clip">复制</button>
    <input type="text" :value="link" id="clip" class="hidden" ref="input">
  </yd-popup>
</template>
<script>
  import {share} from '../../common/js/share'
  import ClipboardJS from 'clipboard'

  export default {
    name: 'xf-share',
    data() {
      return {
        show: false,
        link: '',
        env: GLOBAL_CONF.ENV
      }
    },
    methods: {
      init(o) {
        this.link = o.link
        share.init(o)
      },
      run() {
        share.run(() => {
          this.show = true
        })
      },
      cancelOption() {
        this.show = false
      },
      shareWeChat() {
        if (GLOBAL_CONF.ENV === 'app') {
          this.nativeShare('weChat')
          return
        }
        this.shareType = 'weChat'
        this.$refs.clip.click()
        // this.$message.toast('请使用浏览器的分享功能进行分享')
        this.show = false
      },
      shareFriend() {
        if (GLOBAL_CONF.ENV === 'app') {
          this.nativeShare('friend')
          return
        }
        this.shareType = 'friend'
        this.$refs.clip.click()
        // this.$message.toast('请使用浏览器的分享功能进行分享')
        this.show = false
      },
      shareQZone() {
        if (GLOBAL_CONF.ENV === 'app') {
          this.nativeShare('qZone')
          return
        }
        location.href = `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(share.conf.link)}&title=${encodeURIComponent(share.conf.title)}&desc=${encodeURIComponent(share.conf.desc)}&summary=${encodeURIComponent(location.host)}&site=${encodeURIComponent(share.conf.from)}&pics=${encodeURIComponent(share.conf.icon)}`
      },
      shareQQ() {
        if (GLOBAL_CONF.ENV === 'app') {
          this.nativeShare('qq')
        }
      },
      shareSina() {
        if (GLOBAL_CONF.ENV === 'app') {
          this.nativeShare('weibo')
          return
        }
        location.href = `http://v.t.sina.com.cn/share/share.php?title=${encodeURIComponent(share.conf.title)}&url=${encodeURIComponent(share.conf.link)}&content=${encodeURIComponent(share.conf.desc)}&sourceUrl=${encodeURIComponent(location.host)}&pic=${encodeURIComponent(share.conf.icon)}`
      },
      nativeShare(flag) {
        const shareInfo = JSON.stringify(share.conf)
        switch (flag) {
          case 'weChat':
            // 分享到微信
            try {
              if (window.android) {
                window.android.shareWeChat(shareInfo)
              } else if (window.shareWeChat) {
                window.shareWeChat(shareInfo)
              } else {
                this.$message.toast('分享失败')
              }
            } catch (err) {
              this.$message.alert(err.message)
            }
            break
          case 'friend':
            // 分享到朋友圈
            try {
              if (window.android) {
                window.android.shareFriend(shareInfo)
              } else if (window.shareFriend) {
                window.shareFriend(shareInfo)
              } else {
                this.$message.toast('分享失败')
              }
            } catch (err) {
              this.$message.alert(err.message)
            }
            break
          case 'qq':
            // 分享到qq
            try {
              if (window.android) {
                window.android.shareQQ(shareInfo)
              } else if (window.shareQQ) {
                window.shareQQ(shareInfo)
              } else {
                this.$message.toast('分享失败')
              }
            } catch (err) {
              this.$message.alert(err.message)
            }
            break
          case 'weibo':
            // 分享到新浪微博
            try {
              if (window.android) {
                window.android.shareWeibo(shareInfo)
              } else if (window.shareWeibo) {
                window.shareWeibo(shareInfo)
              } else {
                this.$message.toast('分享失败')
              }
            } catch (err) {
              this.$message.alert(err.message)
            }
            break
          case 'qZone':
            // 分享到qq空间
            try {
              if (window.android) {
                window.android.shareQzone(shareInfo)
              } else if (window.shareQzone) {
                window.shareQzone(shareInfo)
              } else {
                this.$message.toast('分享失败')
              }
            } catch (err) {
              this.$message.alert(err.message)
            }
            break
        }
        this.show = false
      }
    },
    mounted() {
      this.clipboard = new ClipboardJS('.clip-btn')
      this.clipboard.on('success', (e) => {
        let text
        if (this.shareType === 'weChat') {
          text = '链接已复制，您可以发送给微信好友'
        } else {
          text = '链接已复制，请粘贴至朋友圈进行分享'
        }
        this.$message.toast(text)
        this.$refs.input.blur()
      })
      this.clipboard.on('error', function (e) {
        this.$message.toast('分享失败')
      })
    },
    beforeDestroy() {
      this.clipboard && this.clipboard.destroy()
    }
  }
</script>
<style scoped lang="scss">
  .list {
    padding: .1rem;
    background: #efefef;
    display: flex;
    align-items: center;
    .item {
      border-radius: 10%;
      color: #666;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: .1rem;
      i {
        font-size: .8rem;
      }
    }
    .share-icon {
      width: 100%;
      padding: 50% 0;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0;
    }
    .optionText {
      display: inline-block;
      padding: .15rem 0 0 0;
      white-space: nowrap;
    }
  }

  .weixin {
    color: rgb(80, 182, 116);
  }

  .qq {
    color: #12b7f5;
  }

  .kongjian{
    color: rgb(255,206,0);
  }

  .sina {
    color: rgb(233, 50, 54);
  }

  .hidden {
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
  }
</style>
